<template>
    <div>
        <el-tabs type="border-card" v-model="activeName">
            <el-tab-pane v-for="(item, index) in pager.lists" :key="index" :label="item.title" :name="item.id">
                <editor v-model="item.contents" height="500px" />
                <el-button style="margin: 20px 0 0 0" type="primary" @click="saveContent(item)">保存</el-button>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>
<script lang="ts" setup>
import { usePaging } from '@/hooks/usePaging'
import { agreementLists, agreementEdit } from '@/api/agreement'
import feedback from '@/utils/feedback'

const activeName = ref(1)

const queryParams = reactive({
    title: '',
    contents: '',
})

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: agreementLists,
    params: queryParams
})

const state = reactive({
    value1: '',
    value2: ''
})

const saveContent = async (item) => {
    console.log(item)
    await agreementEdit(item)
    feedback.msgSuccess('操作成功')
}

getLists()
</script>
